<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link href="/resources/css/global-style.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
		#modal-login > .form-control {
			position: relative;
			font-size: 16px;
			height: auto;
			padding: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.btn-facebook{
	   		background-color: #3C57A2;
	   		color: #fff;
	   	}
	   	.btn-twitter{
	   		background-color: #00ACED;
	   		color: #fff;
	   	}
	   	.btn-kakao{
	   		background-color: #ffde00;
	   		color: #fff;
	   	}
	   	.btn-instagram{
	   		background-color: #f9f3e8;
	   		color: #483e33;
	   	}
	   	.btn-facebook:focus,
	   	.btn-facebook:hover{
	   		background-color: #314c96;
	   		border-color: #2b4488;
	   		color: #fff;
	   	}
	   	.btn-twitter:focus,
	   	.btn-twitter:hover{
	   		border-color: #0098d1;
	   		background-color: #00a0dd;
	   		color: #fff;
	   	}
	   	.btn-kakao:focus,
	   	.btn-kakao:hover{
	   		background-color: #f3d300;
	   		border-color: #eacb00;
	   		color: #fff;
	   	}
	   	.btn-instagram:focus,
	   	.btn-instagram:hover{
	   		background-color: #ede6da;
	   		
	   	}
	   	#loginBtn { border-radius:0; position: relative; height:45px; width: 100%; }
	   	.login-line { margin:10px auto;height:1px;width:90%;background-color:#e9e9e9;text-align: center;position:relative; }
	   	#login-dialog { max-width: 350px; margin: 25px auto; }
	   	.login-form-input{
	   		height: 40px;
	   		border-radius: 2px;
	   		webkit-appearance: none;
	   	}
    </style>
</head>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script src="/resources/js/kakao.min.js"></script>
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init({appId: '1427921877464450', status: true, cookie: true,xfbml: true});
	};
	
	(function(d){
	     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	     if (d.getElementById(id)) return;
	     js = d.createElement('script'); js.id = id; js.async = true;
	     js.src = "//connect.facebook.net/ko_KR/all.js";
	     ref.parentNode.insertBefore(js, ref);
	}(document));
	
	function alertShow(type, message, dealy){
		var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button><strong>"+message+"</strong></div>");
		$("body").append($el);
		setTimeout(function(){$el.addClass("in");},100);
		setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
	}
	function alertHide(el){
		var $el = $(el).parent();
		$el.removeClass("in");
		setTimeout(function(){$el.remove();},300);
	}
	
	Kakao.init('c5f8d437c21941d011d7e542f02b91dc');
	function loginWithKakao(obj) {
	    Kakao.Auth.login({
	    	success: function(authObj) {
	    		Kakao.API.request({
	    	        url: '/v1/user/me',
	    	        success: function(res) {
	    	        	var data = 'kakao-idx='+res.id+'&kakao-nickname='+res.properties.nickname+'&kakao-profile_image='+res.properties.profile_image;
	    	        	$.ajax({
	                		type : "POST"
	            		    , url : "/kakaoLogin"
	            		    , data : data
	            		    , dataType : "text"
	            		    , timeout : 5000
	            		    , error : function(request, status, error) {
	            		    	alertShow("danger","서버문제로 로그인할 수 없습니다", 2000);
	            		    }
	            		    , success : function(response) {
	            		    	if(response == "login"){
	            		    		location.href= "/";
	            		    	}else if(response == "sign"){
	            		    		location.href= '/start_guide';
	            		    	}else{
	            		    		alertShow("danger","로그인할 수 없습니다", 2000);
	            		    	}
	            		    }
	            		    , beforeSend: function() {
	            		    	$(obj).html("연결중...").attr("disabled","disabled");
	            		    }
	            		    , complete: function() {
	            		    	$(obj).html("카카오 로그인").removeAttr("disabled");
	            		    }
	            		});
	    	        }
	    	    });
	    	}
	    });
	};
	
	/* 페이스북 로그인 */
	function fb_login(obj){
		FB.login(function(response) {
			if (response.status == 'connected') {
	        	FB.api('/me', function(user) {
	                if (user) {
	                	var data = 'fb_name='+user.name+'&fb_id='+user.id+'&fb_email='+user.email+'&fb_gender='+user.gender;
	                	$.ajax({
	                		type : "POST"
	            		    , url : "/fb_getMember"
	            		    , data : data
	            		    , dataType : "text"
	            		    , timeout : 5000
	            		    , error : function(request, status, error) {
	            		    	alertShow("danger","서버문제로 로그인할 수 없습니다", 2000);
	            		    }
	            		    , success : function(response) {
	            		    	if(response == "login"){
	            		    		location.href= "/";
	            		    	}else if(response == "sign"){
	            		    		location.href= '/start_guide';
	            		    	}else{
	            		    		alertShow("danger","로그인할 수 없습니다", 2000);
	            		    	}
	            		    }
	            		    , beforeSend: function() {
	            		    	$(obj).html("연결중...").attr("disabled","disabled");
	            		    }
	            		    , complete: function() {
	            		    	$(obj).html("페이스북 로그인").removeAttr("disabled");
	            		    }
	            		});
	                }else{
	                	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	                }
	        	});
	        }else if (response.status == 'not_authorized') {
	        	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	        }else{
	        	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	        }
		}, {scope: 'email'});
	}
	function login(){
		var data = $("#login-form").serialize();
		
		if($("#loginUser").val() == ""){
			alert('아이디 또는 이메일을 입력해 주세요');
			$("#loginUser").focus();
			return false;
		}
		if($("#loginPassword").val() == ""){
			alert('비밀번호를 입력해 주세요');
			$("#loginPassword").foucs();
			return false;
		}
		
		$.ajax({
		    type : "POST"
		    , url : "/login"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alert("서버문제로 로그인을 할 수 없습니다");
		    }
		    , success : function(response) {
		    	if(response == "true"){
		    		location.href= "/";
		    	}else{
		    		alertShow("danger","사용자 정보가 올바르지 않습니다", 2000);
		    	}
		    }
		    , beforeSend: function() {
		    	$("#loginBtn").html("<div class='spinner small'></div>");
		    }
		    , complete: function() {
		    	$("#loginBtn").html("로그인");
		    }
		});
	}
	
	/* 비밀번호 찾기 */
	function recovery(){
		$("#modal-login").hide('slide',{'direction':'up'},500,function(){
			$("#modal-recovery").fadeIn();
			$("#recovery-step").show();
			$("#recovery-execute").hide();
		});
	}
	
	function recoveryCancel(){
		$("#modal-recovery").hide('slide',{'direction':'down'},500,function(){
			$("#modal-login").fadeIn();
			$("#recovery-step").hide();
			$("#recovery-execute").hide();
		});
	}
	
	function recoveryPasswd(obj){
		if($("#InputRecoveryEmail").val() == ""){
			alertShow("danger","이메일을 입력해 주세요", 2000);
			$("#InputRecoveryEmail").focus();
		}else{
			$.ajax({
			    type : "POST"
			    , url : "/recoveryPasswd?email="+$("#InputRecoveryEmail").val()
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	alertShow("danger","다시 시도해주세요", 2000);
			    	$(obj).html("전송").removeAttr("disabled","disabled");
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		$("#recovery-step").hide();
			    		$(".recovery-execute-message").html("<p><strong>"+$("#InputRecoveryEmail").val()+"</strong> 이메일로 비밀번호 찾기 URL주소를 전송하였습니다.<br>이메일을 확인해 주세요</p>");
			    		$("#recovery-execute").show();
			    	}else{
			    		alertShow("danger","등록되지 않은 이메일입니다", 2000);
			    	}
			    }
			    , beforeSend: function() {
			    	$(obj).html("전송중..").attr("disabled","disabled");
			    }
			    , complete: function() {
			    	$(obj).html("전송").removeAttr("disabled","disabled");
			    }
			});
		}
	}
	
	function twitterCall(response){
  		if(response == "sign"){
  			location.href= "/start_guide";
  		}else{
  			location.href= "/";
  		}
  	}
  	
  	function instagramCall(response){
  		if(response == "sign"){
  			location.href= "/start_guide";
  		}else{
  			location.href= "/";
  		}
  	}
  	
   	$().ready(function(){
   		//$("#login-dialog").animate({"margin-top":"25px","opacity":1},600);
   	});
</script>
<body>
<div class="container" style="margin-top: 25px;">
	<div id="login-dialog">
		<div style="background-color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.18);">
			<form id="login-form">
			<div id="modal-login">
				<div style="padding: 15px;">
		        <%-- <button type="button" class="close" onclick="location.href='/home';" style="font-size: 28px;">×</button>
		        <h4 class="modal-title"><spring:message code="head.login"/></h4> --%>
		        <div>
		        	<button type="button" class="btn btn-facebook btn-lg btn-block" title="<spring:message code="head.login.fb"/>" onclick="fb_login(this);" style="position: relative; border-radius:2px; font-size: 16px;"><span style="position: absolute; left:15px; top:11px; font-size: 16px;"><i class="fa fa-facebook fa-lg"></i></span><spring:message code="head.login.fb"/></button>
		        	<button type="button" class="btn btn-instagram btn-lg btn-block" title="<spring:message code="head.login.instagram"/>"  onclick="window.open('https://api.instagram.com/oauth/authorize/?client_id=1211a537d5c444c8a06c8d73bdc93bc6&redirect_uri=http://faeple.com/connectInstgram&response_type=code','Instagram','resizable=no width=500 height=380 scrollbars=yes')" style="position: relative; border-radius:2px; font-size: 16px;"><span style="position: absolute; left:15px; top:11px; font-size: 16px;"><i class="fa fa-instagram fa-lg"></i></span><spring:message code="head.login.instagram"/></button>
		        	<button type="button" class="btn btn-twitter btn-lg btn-block" title="<spring:message code="head.login.twitter"/>" onclick="window.open('/twitterLogin','twitter','resizable=no width=720 height=430')" style="position: relative;border-radius:2px; font-size: 16px;"><span style="position: absolute; left:15px; top:11px;"><i class="fa fa-twitter fa-lg"></i></span><spring:message code="head.login.twitter"/></button>
		        	<button type="button" class="btn btn-kakao btn-lg btn-block" title="<spring:message code="head.login.kakao"/>" onclick="loginWithKakao(this);" style="position: relative;border-radius:2px; font-size: 16px;"><img src="/resources/img/kakao-icon.gif" width="20" height="20" style="position: absolute; left:15px;"><spring:message code="head.login.kakao"/></button>
		        </div>
				</div>
				<div class="login-line"><span style="position:relative;top:-9px;background-color:white;padding:0 10px;color:#808080;font-size:13px;"><spring:message code="common.or"/></span></div>
				<div class="modal-body" style="padding-bottom: 3px;">
					<input type="text" class="form-control login-form-input" id="loginUser" name="loginUser" placeholder="<spring:message code="head.login.id"/>" title="<spring:message code="head.login.id"/>" tabindex="1" autofocus="autofocus" style="margin-bottom: 5px;">
					<input type="password" class="form-control login-form-input" id="loginPassword" name="loginPassword" placeholder="<spring:message code="head.login.passwd"/>" title="<spring:message code="head.login.passwd"/>" tabindex="2" onkeypress="if (event.keyCode == 13) { login(); }">
					<div class="checkbox"><label title="<spring:message code="head.login.remember"/>"><input type="checkbox" id="autologin" name="autologin"><spring:message code="head.login.remember"/></label></div>
					<button type="button" id="loginBtn" class="btn btn-primary btn-lg" onclick="login();"><spring:message code="head.login"/></button>
				</div>
				<div class="login-line"></div>
				<div style="padding: 6px 12px;">
					<p style="color: #6D6D6D;"><a href="/signup" style="color: #6D6D6D; text-decoration: none;"><strong><spring:message code="sign.button"/></strong></a><span style="padding:0 10px;color:#ccc;">/</span><span onclick="recovery();" style="cursor: pointer;"><strong><spring:message code="head.login.forgotpw"/></strong></span></p>
					<div class="clearfix"></div>
				</div>
			</div>
			<div id="modal-recovery" style="display: none;">
				<div style="padding: 15px;">
		        	<button type="button" onclick="location.href='/home';" class="close" style="font-size: 28px;">×</button>
		        	<h4 class="modal-title"><spring:message code="head.login.forgotpw"/></h4>
				</div>
				<div style="padding: 15px;" id="recovery-step">
					<p>가입시 등록한 이메일 주소를 입력해주세요</p>
					<input type="text" class="form-control" id="InputRecoveryEmail" name="InputRecoveryEmail" placeholder="이메일" title="이메일" tabindex="1" autofocus="autofocus" style="margin-bottom: 25px;">
					<div style="text-align: right;">
						<button type="button" class="btn btn-primary" onclick="recoveryPasswd(this);">전송</button>
						<button type="button" class="btn btn-default" onclick="recoveryCancel(this);">취소</button>
					</div>
				</div>
				<div style="padding: 15px;" id="recovery-execute">
					<div class="recovery-execute-message"></div>
					<div style="text-align: center;"><button type="button" class="btn btn-success btn-block" onclick="location.href='/home';">확인</button></div>
				</div>
			</div>
			</form>
		</div>
	</div>
</div>
<form id="kakao-form" method="post" action="/kakaoLogin">
	<input type="hidden" id="kakao-idx" name="kakao-idx" value="">
	<input type="hidden" id="kakao-nickname" name="kakao-nickname" value="">
	<input type="hidden" id="kakao-profile_image" name="kakao-profile_image" value="">
</form>

</body>
</html>